<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    .active{
        color:red;
    }
    </style>
</head>
<body>
    <audio autoplay controls></audio>

    <ol>
        <li>马里奥赛德,Alan Walker,Iselin Solheim - Faded（钢琴版+女声）.mp3</li>
        <li>逃跑计划 - 夜空中最亮的星.mp3</li>
        <li>薛之谦 - 丑八怪.mp3</li>
        <li>薛之谦-演员.mp3</li>
    </ol>

    <script>
        var  audio=document.querySelector("audio");
        var lis=document.querySelectorAll("li");
        var  index=0;
        var src=lis[index].innerHTML;
        console.log(src);
        audio.src="./source/"+src;
        lis[index].className="active";

        audio.onended=function(){
            lis[index].className="";
            index++;
            if(index==4){
                index=0;
            }
            src=lis[index].innerHTML;
            console.log(src);
            audio.src="./source/"+src;
            lis[index].className="active";
        }
        
        
    
    </script>
</body>
</html>